<template>
  <div>
	  <div style="margin:2% 0;display: inline-block;">
		<span>商品标题：</span>
		<el-input style="width: 150px;" @keydown.enter.native="select" clearable placeholder="请输入商品标题" v-model="title"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
	    <span>商品状态：</span>
	    <el-select v-model="status" placeholder="请选择商品状态" style="width:150px;" @change="select(status)">
	      <el-option v-for="item in statusmain" :key="item.value" :label="item.label" :value="item.value">
	      </el-option>
	    </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
	  </div>
	  <div style="display: inline-block;">
	    <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="select">查询</el-button>
	    <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="cleans">重置</el-button>
	    <el-button style='margin-left:15px;' :disabled="!isAuth('ticketList:add')" size="mini" type="primary" icon="document" @click="addShop">发布商品</el-button>
		<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="refresh">刷新</el-button>
		<el-button style='margin-left:15px;' :disabled="checkBoxData.length <= 0 " size="mini" type="primary" icon="document" @click="Standselect()">一键上架</el-button>
		<el-button style='margin-left:15px;' :disabled="checkBoxData.length <= 0 " size="mini" type="primary" icon="document" @click="Standselect2()">一键下架</el-button>
	</div>
	  	<el-table
		@selection-change="changeFun"
	  	v-loading="tableDataLoading"
	  	  :data="tableData.content">
		  <el-table-column type="selection" fixed >
		  </el-table-column>
	  	<el-table-column
	  	  fixed
	  	 prop="id"
	  	 label="编号"
	  	 width="80">
	  	 </el-table-column>
	  	 <el-table-column
			fixed
	  		prop="coverImg"
	  		label="商品图片">
	  		<template slot-scope="scope">
	  			<img :src="scope.row.coverImg" alt="" width="60" height="60">
	  		</template>
	  	  </el-table-column>
	  	  <el-table-column
	  		 prop="title"
	  		 label="商品标题"
			 width="200">
	  	   </el-table-column>
	  		  <el-table-column
	  		   prop="price"
	  		   label="商品钻石">
			   <template slot-scope="scope">
			   		<span style="color: #f56c6c;">{{scope.row.price}}</span>
			   </template>
	  		   </el-table-column>
	  		  <el-table-column
	  		   prop="sales"
	  		   label="商品销量">
	  		   </el-table-column>
			   <el-table-column
			    prop="buyReason"
			    label="商品参数"
					width="200">
			    </el-table-column>
				  <!-- <el-table-column
						label="是否需要发货"
						width="150">
						<template slot-scope="scope">
								<span v-if="scope.row.isExpress == 1">普通商品需要发货</span>
								<span v-if="scope.row.isExpress== 2">虚拟商品无需发货</span>
								<span v-if="scope.row.isExpress == 3">门店核销无需发货</span>
								<span v-if="scope.row.isExpress == 4">优惠券</span>
						</template>
				   </el-table-column> -->
				   <el-table-column
					label="门票类型"
					width="150">
					<template slot-scope="scope">
							<span v-if="scope.row.ticketType == 1">初级</span>
							<span v-if="scope.row.ticketType== 2">中级</span>
							<span v-if="scope.row.ticketType == 3">高级</span>
							<span v-if="scope.row.ticketType == 4">vip</span>
							<span v-if="scope.row.ticketType == 5">1v1</span>
							<span v-if="scope.row.ticketType == 6">免费</span>
					</template>
				    </el-table-column>
					 <el-table-column
					   fixed='right'
					   label="上下架">
					   <template slot-scope="scope">
					     <el-switch
					       v-model="scope.row.status"
					       @change="change(scope.row.id)"
					       :active-value="openValue"
					       :inactive-value="closeValue"
					       active-color="#13ce66"
					       inactive-color="#ff4949">
					     </el-switch>
					   </template>
					 </el-table-column>
	  		  <el-table-column
	  			prop="createAt"
	  			label="创建时间"
	  			width="160">
	  		  </el-table-column>
	  		  <el-table-column
	  			fixed="right"
	  		    label="操作"
	  			width="100">
	  		    <template slot-scope="scope">
	  		      <el-button
	  		        size="mini"
	  		        type="primary"
					:disabled="!isAuth('ticketList:update')"
	  		        @click="shopUpdates(scope.$index, scope.row)">修改
	  		      </el-button>
	  		    </template>
	  		  </el-table-column>
	  	</el-table>
	  	<div style="text-align: center;margin-top: 10px;">
	  	  <el-pagination
	  	    @size-change="handleSizeChange"
	  	    @current-change="handleCurrentChange"
	  	    :page-sizes="[5, 10, 15, 20]"
	  	    :page-size="size"
	  	    :current-page="page"
	  	    layout="total,sizes, prev, pager, next"
	  	    :total="totalnum">
	  	  </el-pagination>
	  	</div>
  </div>
</template>

<script>
	export default {
	    data() {
	      return {
				size:5,
				page:1,
				openValue: 1,
				closeValue: 2,
				id:'',
				img:'',
				title:'',
				type:'',
				typeId:'',
				readonly:true,
				merchants:'',
				price:'',
				memberPrice:'',
				originalPrice:'',
				sales:'',
				status:0,
				status2:'',
				descrition:'',
				totalnum:0,
				imgUrl:'',
				linkUrl:'',
				value:[],
				classDatas:[],
				isJiFenGoods:2,
				checkBoxData: [],//多选框选择的值
				form1:{
					id:'',
					title:'',
					img:'',
					typeId:'',
					merchants:'',
					price:'',
					memberPrice:'',
					status:'',
					sales:'',
					descrition:'',
					originalPrice:'',
					createAt:''
				},
				statusmain:[
					{
						value:0,
						label:'全部'
					},
					{
						value:1,
						label:'上架'
					},
					{
						value:2,
						label:'下架'
					}
				],
				statusmain2:[
					{
						value:1,
						label:'上架'
					},
					{
						value:2,
						label:'下架'
					}
				],
				formLabelWidth:'200px',
				tableDataLoading:false,
				dialogFormVisible2:false,
				dialogFormVisible3:false,
				typeDatas:[],
				advertData:[],
				tableData:[],
			}
		},
		filters: {
		  numFilter (value) {
		    let realVal = ''
		    if (!isNaN(value) && value!== '') {
		      // 截取当前数据到小数点后三位
		      let tempVal = parseFloat(value).toFixed(3)
		      realVal = tempVal.substring(0, tempVal.length - 1)
		    } else {
		      realVal = '--'
		    }
		    return realVal
		  }
		},
		methods: {
			// 多选
			changeFun(val) {
				this.checkBoxData = val;
			},
			// 上下架
			change (id) {
			  this.$http({
			    url: this.$http.adornUrl2('/goods/updateStatus'),
			    method: 'get',
			    params: this.$http.adornParams({
					'goodsId':id
				})
			  }).then(({data}) => {
			    this.$message({
			      message: '操作成功',
			      type: 'success',
			      duration: 1500,
			    })
			  })
			},
			// 刷新
			refresh(){
				this.shopSelect()
			},
			handleChange(value) {
				this.value.forEach(element => {
					this.typeId = element;
				});
			},

			handleAvatarSuccess(file) {
			   this.img = file.data;
			},
			handleAvatarSuccess2(file) {
			     this.form1.img = file.data;
			 },
			handleSizeChange(val) {
				this.size = val;
				this.shopSelect()
			},
			handleCurrentChange(val) {
				this.page = val;
				this.shopSelect()
			},
			//搜索
			select(){
				this.page = 1
				this.size = 5
				this.shopSelect()
			},
			// 重置
			cleans(){
				this.title = ''
				this.status = 0
				this.typeId = ''
				this.value = []
				this.shopSelect()
			},
			//发布商品
			addShop(){
				this.$router.push({path: '/ticketAdd'})
			},
			// 修改商品
			shopUpdates(index,rows){
				this.$router.push({path: '/ticketAmend', query: {id: rows.id}});
			},
			// 商品评价跳转
			discuss(index,rows){
				this.$router.push({path: '/discuss', query: {goodsId: rows.id}});
			},
			// 删除商品
			shopdeletes(row){
				this.$confirm(`确定删除此条信息?`, '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  this.$http({
				    url: this.$http.adornUrl2('/goods/delete'),
				    method: 'get',
				    params: this.$http.adornParams({
						'id':row.id
				    })
				  }).then(({data}) => {
					  this.$message({
						message: '删除成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
						  this.shopSelect()
						}
					  })
				  })
				}).catch(() => {})
			},
			// 批量上架
			Standselect(id){
				var ids= id ? [id] : this.checkBoxData.map(item => {
					return item.id
				})
				ids = ids.toString()
				this.$http({
				  url: this.$http.adornUrl2('/goods/updateStatusIds'),
				  method: 'get',
				  params: this.$http.adornParams({
					  'goodsIds':ids,
					  'status':1
				  })
				}).then(({data}) => {
					this.$message({
						message: '批量上架成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
						  this.shopSelect()
						}
					})
				})
			},
			// 批量下架
			Standselect2(id){
				var ids= id ? [id] : this.checkBoxData.map(item => {
					return item.id
				})
				ids = ids.toString()
				this.$http({
				  url: this.$http.adornUrl2('/goods/updateStatusIds'),
				  method: 'get',
				  params: this.$http.adornParams({
					  'goodsIds':ids,
					  'status':2
				  })
				}).then(({data}) => {
					this.$message({
						message: '批量下架成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
						  this.shopSelect()
						}
					})
				})
			},
			// 获取商品数据
			shopSelect () {
			  let page = this.page-1
			  this.tableDataLoading = true
			  this.$http({
				url: this.$http.adornUrl2('/goods/list'),
				method: 'get',
				params: this.$http.adornParams({
					'page':page,
					'size':this.size,
					'title':this.title,
					'type':this.typeId,
					'status':this.status,
					'isJiFenGoods':this.isJiFenGoods
				})
			  }).then(({data}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					//console.log(returnData)
					this.tableData = returnData
					this.totalnum = returnData.totalElements
			  })
			},
			// 商品分类
			dataSelect () {
			  this.tableDataLoading = true
			  this.$http({
				url: this.$http.adornUrl2('/goodsType/result'),
				method: 'get',
				params: this.$http.adornParams({
				})
			  }).then(({data}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					this.classDatas = returnData
			  })
			}
		},
		mounted() {
			this.shopSelect()
		}
	  };
</script>

<style>

</style>
